<script setup lang="ts">
  import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
  import LoadingView from './components/LoadingView.vue';
  import router from './router';

  const isLoading = ref(true);

  const startLoading = () => {
    isLoading.value = true;
  };

  const endLoading = () => {
    isLoading.value = false;
  };

  onMounted(() => {
    window.addEventListener('start-loading', startLoading);
    window.addEventListener('end-loading', endLoading);
  });

  onUnmounted(() => {
    window.removeEventListener('start-loading', startLoading);
    window.removeEventListener('end-loading', endLoading);
  });

  onBeforeMount(() => {
    // 在组件挂载前，使用路由实例
    router.isReady().then(() => {
      // 路由准备就绪后，隐藏 loading 组件
      isLoading.value = false;
    });
  });
</script>

<template>
  <transition name="fade" enter-active-class="animate__animated animate__fadeIn "
    leave-active-class="animate__animated animate__fadeOut" appear>
    <LoadingView v-if="isLoading" />
  </transition>
  <router-view v-slot="{ Component }">
    <transition enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut" appear>
      <div>
        <component :is="Component" />
      </div>
    </transition>
  </router-view>



</template>

<style scoped></style>
